<!-- 动画按钮 动画问题-->
<template>
  <div class="btn">
    <NuxtLink :to="props.href">
      <el-button :style="{ width: props.width, height: props.height }">
        {{ props.title }}
      </el-button>
    </NuxtLink>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    required: "标题",
  },
  width: {
    type: String,
    default: "200px",
  },
  height: {
    type: String,
    default: "50px",
  },
  href: {
    type: String,
    default: "javascript:;",
  },
});
</script>

<style lang="scss" scoped>

   
//按钮
.el-button {
    width: 100%;
    background-color: $green;
    color: #fff;
    border: none;
    border-radius: 2px;

}

.el-button:hover {
    background-color: #28ffdf;
    
}
.el-button:active {
    background-color: #009b84;
    
}
</style>
